<template>
  <div class="live-view">
    <view class="page-section">
      <live-pusher
        class="pusher"
        id="pusher"
        :url="pushUrl"
        mode="RTC"
        autopush
        @statechange="statePusherChange"
      ></live-pusher>
    </view>
    <view class="page-section">
      <live-player
        class="player"
        id="player"
        :src="pullUrl"
        object-fit="fillCrop"
        mode="RTC"
        autoplay
        @statechange="statePlayerChange"
        @error="error"
      />
    </view>
  </div>
  <view class="opt-area flex">
    <view class="btn-area">
      <button @click="onStart" class="page-body-button" type="primary">播放推流</button>
      <button @click="onPause" class="page-body-button" type="primary">暂停推流</button>
      <button @click="onStop" class="page-body-button" type="primary">停止推流</button>
      <button @click="onResume" class="page-body-button" type="primary">恢复推流</button>
      <button @click="onSwitchCamera" class="page-body-button" type="primary"
        >切换前后摄像头</button
      >
    </view>
    <view class="btn-area">
      <button @click="onPlayerStart" class="page-body-button" type="primary">播放</button>
      <button @click="onPlayerPause" class="page-body-button" type="primary">暂停</button>
      <button @click="onPlayerStop" class="page-body-button" type="primary">停止</button>
      <button @click="onPlayerResume" class="page-body-button" type="primary">恢复</button>
      <button @click="onPlayerMute" class="page-body-button" type="primary">静音</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { getEnvValue } from '@/utils/env';
  import { ref, reactive } from 'vue';

  // @ts-check
  const name = ref('webRtc');
  // const pushUrl = ref(import.meta.env.VITE_APP_RTMP_URL + '/1');
  const pushUrl = ref('rtmp://112.91.138.243/live/abc');
  // const pullUrl = ref(import.meta.env.VITE_APP_RTMP_URL + '/2');
  const pullUrl = ref('rtmp://112.91.138.243/live/def');

  const biliURL =
    'rtmp://live-push.bilivideo.com/live-bvc/?streamname=live_34309393_84771683&key=ecfe8d51e47a41300746ebd9456c8985&schedule=rtmp&pflag=1';

  let pusher = reactive(wx.createLivePusherContext('pusher'));
  let player = reactive(wx.createLivePlayerContext('player'));
  console.log('player: ', player);
  console.log('pusher: ', pusher);
  const statePusherChange = (e) => {
    console.log('live-pusher code:', e.detail.code);
  };
  const statePlayerChange = (e) => {
    console.log('live-player code:', e.detail.code);
  };
  console.log(`output->biliURL`, biliURL);
  const onStart = () => {
    pusher.start({
      succeess(res) {
        console.log(`start->`, res);
      },
      fail(fail) {
        console.log(`start->`, fail);
      },
    });
  };
  const onPause = () => {
    pusher.pause({
      succeess(res) {
        console.log(`pause->`, 'success');
      },
      fail(fail) {
        console.log(`pause->`, 'faile');
      },
    });
  };
  const onStop = () => {
    pusher.stop({
      succeess(res) {
        console.log(`Stop->`, 'success');
      },
      fail(fail) {
        console.log(`Stop->`, 'faile');
      },
    });
  };
  const onResume = () => {
    pusher.resume({
      success: (res) => {
        console.log('resume success');
      },
      fail: (res) => {
        console.log('resume fail');
      },
    });
  };
  const onSwitchCamera = () => {
    pusher.switchCamera({
      success(res) {
        console.log('switchCamera success');
      },
      fail(fail) {
        console.log('switchCamera fail');
      },
    });
  };
  const error = (err) => {
    console.log('err: ', err);
  };
  const onPlayerStart = () => {
    player.play({
      success(res) {
        console.log(`play->`, res);
      },
      fail(err) {
        console.log(`play`, err);
      },
    });
  };
  const onPlayerPause = () => {
    player.pause({
      success(res) {
        console.log(`pause->`, res);
      },
      fail(err) {
        console.log(`pause`, err);
      },
    });
  };
  const onPlayerStop = () => {
    player.stop({
      success(res) {
        console.log(`stop->`, res);
      },
      fail(err) {
        console.log(`stop`, err);
      },
    });
  };
  const onPlayerResume = () => {
    player.resume({
      success(res) {
        console.log(`resume->`, res);
      },
      fail(err) {
        console.log(`resume`, err);
      },
    });
  };
  const onPlayerMute = () => {
    player.mute({
      success(res) {
        console.log(`mute->`, res);
      },
      fail(err) {
        console.log(`mute`, err);
      },
    });
  };
</script>

<style lang="scss" scoped>
  .btn-area {
    width: 50%;
  }
  .page-body-button {
    margin-bottom: 30rpx;
  }
  .live-view {
    position: relative;
    .pusher {
      margin: 0 auto;
      width: 100%;
      height: 625rpx;
    }
    .player {
      position: absolute;
      right: 0;
      top: 0;
      width: 40%;
      height: 300rpx;
    }
  }
</style>
